<template>
  <div class="dialog">
    <el-dialog
      title="加工任务处理"
      :visible.sync="showDialog"
      width="45%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-form
        ref="ruleForm"
        label-position="left"
        label-width="120px"
        :model="formData"
        class="allGongyi"
        style="width: 100%;"
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item
              label="加工开始时间："
              prop="startTime"
              :rules="[{ required: true, message: '开始时间不能为空', trigger: ['change', 'blur'] }]"
            >
              <el-date-picker
                v-model="formData.startTime"
                style="width: 100%;"
                type="datetime"
                :picker-options="beginDate()"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择时间"
                @change="getTimeChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="加工结束时间："
              prop="endTime"
              :rules="[{ required: true, message: '结束时间不能为空', trigger: ['change', 'blur'] }]"
            >
              <el-date-picker
                v-model="formData.endTime"
                style="width: 100%;"
                type="datetime"
                :picker-options="processDate()"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择时间"
                @change="getTimeChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          v-for="(item,index) in formData.taskCraftList"
          :key="item.taskCraftNo"
          class="gongyi"
          :prop="'taskCraftList.' + index + '.value'"
          :label="'工艺参数' + (index+1) + ':'"
          :rules="[{ required: true, message: '工艺参数值不能为空', trigger: ['change', 'blur'] }]"
        >
          <el-input v-model="item.craftName" style="width: 40%" disabled />
          <el-input
            v-model="item.value"
            style="width: 35%"
            :disabled="!!item.dataItemId"
            :placeholder="!item.dataItemId ? '工艺参数值(人工入录)' : '工艺参数值'"
          />
          <el-input
            v-model="item.unitName"
            style="width: 20%"
            placeholder="单位"
            disabled
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        <el-button type="primary" class="savebtn" @click="save('ruleForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import productionLineApi from "@/api/processing-management/basic-info-manage/production-line-manage/index";
export default {
  name: "TaskHandle",
  components: {},
  props: {
    // 弹框名称
    titleText: {
      type: String,
      default: ""
    },
    show: {
      type: Boolean,
      default: false
    },
    formDataCopy: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      showDialog: this.show,
      // 展示
      formData: {
        ...this.formDataCopy
      },
      pictureList: [],
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        }
      ]
    };
  },

  watch: {
    show(v) {
      this.showDialog = v;
    },
    formDataCopy(v) {
      this.formData = { ...this.formData, ...v };
    }
  },
  methods: {
    // 限制前面日期不能低于后面日期
    beginDate() {
      const self = this;
      return {
        disabledDate(time) {
          if (self.formData.endTime) {
            //  如果结束时间不为空，则小于结束时间
            return new Date(self.formData.endTime).getTime() < time.getTime();
          } else {
            // return time.getTime() > Date.now(); // 开始时间不选时，结束时间最大值小于等于当天
          }
        }
      };
    },
    processDate() {
      const self = this;
      return {
        disabledDate(time) {
          if (self.formData.startTime) {
            //  如果开始时间不为空，则结束时间大于开始时间
            self.time = new Date();
            return new Date(self.formData.startTime).getTime() > time.getTime();
          } else {
            // return time.getTime() > Date.now(); // 开始时间不选时，结束时间最大值小于等于当天
          }
        }
      };
    },
    getTimeChange() {
      if (this.formData.startTime && this.formData.endTime) {
        this.formData.taskCraftList.forEach((element, idx) => {
          if (element.dataItemId) {
            let a = this.formData.startTime.replace(/-/g, "/");
            let b = this.formData.endTime.replace(/-/g, "/");
            productionLineApi
              .getAvgByDataItemIdAndDate({
                dataItemId: element.dataItemId,
                startDate: a,
                endDate: b
              })
              .then(res => {
                this.$set(
                  this.formData.taskCraftList[idx],
                  "value",
                  res.data.avg
                );
                this.$set(
                  this.formData.taskCraftList[idx],
                  "unitName",
                  res.data.unit
                );
              });
          } else {
            //
          }
        });
      }
    },
    save(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          console.log(this.formData);
          this.$emit("addEvent", this.formData);
          this.cancel();
        }
      });
    },
    close() {
      this.$emit("closeDialog");
    },
    cancel() {
      this.$emit("closeDialog");
      this.formData = {};
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content {
  margin-left: 0 !important;
  display: flex;
  flex-wrap: wrap;
  .el-input {
    width: 48%;
    margin-bottom: 10px;
    margin-right: 1%;
  }
}
.allGongyi {
  display: flex;
  flex-wrap: wrap;
  .gongyi {
    display: flex;
    width: 70%;
    flex-wrap: nowrap;
  }
}
::v-deep .el-form-item__content .el-input {
  margin-right: unset;
}
</style>
